<template>
  <div class="room-wrapper">
    <el-row class="container">
      <div class="title">开启分时：</div>
      <el-switch v-model="able_room_time" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭" />
    </el-row>
    <el-row class="container desc">
      <div class="title">每日最大房时：</div>
      <el-select v-model="hotel_max_room_time" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div style="margin-left: 10px">小时</div>
    </el-row>
    <el-row class="container">
      <div class="title">&nbsp;</div>
      <div>每日可累积的最大房时</div>
    </el-row>
    <el-row class="container">
      <div class="title">夜审时间：</div>
      <el-time-select v-model="night_trial_time" :picker-options="{ start: '00:00', step: '00:30', end: '23:30' }" value-format="HH-mm-ss" placeholder="选择时间" :editable="false" />
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>
<script>
import { getRoomTime, postRoomTime } from '@/api/params'
export default {
  name: 'ParamsHotelRoom',
  data() {
    return {
      hotel_max_room_time: 1,
      night_trial_time: '',
      num: 24,
      able_room_time: false,
      options: []
    }
  },
  created() {
    this.createdTime()
    this.getRoom()
  },
  methods: {
    createdTime() {
      const times = Array.from(new Array(this.num).keys())
      const result = []
      times.map((item) => {
        result.push({ label: item + 1, value: item + 1 })
      })
      console.log(result)
      this.options = result
    },
    async getRoom() {
      const res = await getRoomTime()
      const { hotel_max_room_time, night_trial_time, able_room_time } = res.data.config
      this.able_room_time = able_room_time === 1
      this.hotel_max_room_time = hotel_max_room_time
      this.night_trial_time = night_trial_time.substring(0, 5)
    },
    async handleSave() {
      const type = 'room'
      const { hotel_max_room_time, night_trial_time, able_room_time } = this
      const newRoomTime = able_room_time ? 1 : 0
      await postRoomTime({ hotel_max_room_time, night_trial_time, type, able_room_time: newRoomTime })
      this.$message.success({
        message: '保存成功',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.room-wrapper {
  width: 100%;
  padding: 20px;
  padding-top: 0;
  box-sizing: border-box;
  .container{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title {
      width: 140px;
    }
    .input-container{
      width: 300px;
    }
  }
  .desc {
    margin-bottom: 10px;
  }
}
</style>
